import 'package:carbon/json/article_item.dart';
import 'package:carbon/network/article_api.dart';
import 'package:carbon/widgets/bottom_navigator_bar.dart';
import 'package:carbon/widgets/confirmDialog.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../store/item_model_data.dart';

import '../json/item_model.dart';
import '../network/user_api.dart';

class IndexPage extends StatefulWidget {
  const IndexPage({super.key});

  @override
  State<IndexPage> createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  List<ArticleItem> articleList = [];
  ArticleApi articleApi = new ArticleApi();

  // void preData() async {
  //   var res = await articleApi.findTop15Article();
  //   if(res.code == 200){
  //     articleList = res.data as List<ArticleItem>;
  //   }else{
  //     showConfirmDialog(context, "文章数据获取失败");
  //     print("文章数据获取失败");
  //   }
  // }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigatorBar(),
      body: FutureBuilder(
        future: articleApi.findTop15Article(),
        builder: (context, snpashot){
          switch(snpashot.connectionState){
            case ConnectionState.done:
              if(snpashot.data!.code==200){
                articleList = snpashot.data!.data as List<ArticleItem>;
              }
              return CustomScrollView(
                slivers: [
                  SliverAppBar(
                    backgroundColor: Color(int.parse("04a461",radix:16)).withAlpha(255),
                    expandedHeight: 140,
                    flexibleSpace: FlexibleSpaceBar(
                      background: Image.asset("assets/imgs/carbon_index_1.png",fit: BoxFit.cover),
                    ),
                    // pinned: true,//固定显示
                    floating: true,//用户下拉时会自然消失视野，但是有上拉操作时，就会显现该区域
                    // snap: true,//要和floating结合使用，但是我们 appBar区域较小，看不出差别
                  ),

                  SliverPadding(padding: EdgeInsets.only(bottom: 12)),
                  SliverGrid(
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 5,
                        mainAxisSpacing: 8
                    ),
                    delegate: SliverChildBuilderDelegate((context, index){
                      return GestureDetector(
                        onTap: (){print("网格列表$index被点击");},
                        child:  IndexGridViewItem(item: gridViewItemList[index],),
                      );
                    },
                        childCount: gridViewItemList.length
                    ),
                  ),

                  SliverPadding(padding: EdgeInsets.only(bottom: 5)),


                  SliverToBoxAdapter(
                      child: Container(
                          margin: EdgeInsets.symmetric(horizontal: 10),
                          child: Column(
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    width: 162,height: 200,
                                    decoration: BoxDecoration(
                                        borderRadius: const BorderRadius.all(Radius.circular(8)),
                                        // color: Colors.green,
                                        image:DecorationImage(image: AssetImage("assets/imgs/index_banner_1.png"),fit:BoxFit.cover)
                                    ),
                                    child: Container(
                                      margin: EdgeInsets.only(top: 10,left: 10),
                                      child: Text("碳交易",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey.shade700),),
                                    ),
                                  ),
                                  Padding(padding: EdgeInsets.only(right: 10)),
                                  Container(
                                    child: Column(
                                      children: [
                                        Container(
                                          width: 162,height: 95,
                                          decoration: BoxDecoration(
                                            borderRadius: const BorderRadius.all(Radius.circular(8)),
                                            image:DecorationImage(image: AssetImage("assets/imgs/index_banner_2.png"),fit:BoxFit.cover),
                                            // color: Colors.green,
                                          ),
                                          child: Container(
                                            margin: EdgeInsets.only(top: 10,left: 10),
                                            child: Text("碳资产",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey.shade700),),
                                          ),
                                        ),
                                        Padding(padding: EdgeInsets.only(bottom: 10)),
                                        Container(
                                          width: 162,height: 95,
                                          decoration: BoxDecoration(
                                            borderRadius: const BorderRadius.all(Radius.circular(8)),
                                            image:DecorationImage(image: AssetImage("assets/imgs/index_banner_3.png"),fit:BoxFit.cover),
                                            // color: Colors.green,
                                          ),
                                          child: Container(
                                            margin: EdgeInsets.only(top: 10,left: 10),
                                            child: Text("碳资讯",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey.shade700),),
                                          ),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                              Padding(padding: EdgeInsets.only(bottom: 25)),
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                children: [
                                  Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      Padding(padding: EdgeInsets.only(left: 3)),
                                      Image.asset("assets/imgs/icon_rec.png",width: 25,),
                                      Padding(padding: EdgeInsets.only(left: 2)),
                                      Text("为你推荐"),
                                    ],
                                  ),
                                  Row(
                                    crossAxisAlignment: CrossAxisAlignment.center,
                                    children: [
                                      Text("查看更多",style: TextStyle(color: Colors.grey.shade600),),
                                      Padding(padding: EdgeInsets.only(left: 2)),
                                      Container(
                                        margin: EdgeInsets.only(top: 2),
                                        child: Image.asset("assets/imgs/icon_right_arrow.png",width: 12,),
                                      ),
                                      Padding(padding: EdgeInsets.only(left: 3)),
                                    ],
                                  ),
                                ],
                              )
                            ],
                          )
                      )
                  ),
                  SliverList(
                    delegate: SliverChildBuilderDelegate((context, index){
                      return Container(
                        margin: EdgeInsets.symmetric(horizontal: 10),
                        child: GestureDetector(
                          onTap: (){ toArticlePage( articleList[index],index); },
                          child: IndexListViewItem(item: articleList[index],index:index),
                        ),
                      );
                    },
                      //这个数量要指定，否则报错
                      childCount: articleList.length,
                    ),
                  ),
                ],
              );
            default:
              return Center(child: Text("数据加载中"));
          }
        },
      ),
    );
  }


  toArticlePage(ArticleItem item, int index){
    var itemWithIndex = [item,index];
    Navigator.pushNamed(context, "article",arguments: itemWithIndex);
  }
}











































class TitleContainer extends StatelessWidget {
  const TitleContainer({super.key, required this.title});
  final String title;
  @override
  Widget build(BuildContext context) {
    return Container(
      //给组件增加负边距  分别对应xyz方向上的边距
      transform: Matrix4.translationValues(-10, 0, 0.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(child: IconButton(
              color: Colors.white,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onPressed: (){}, icon: Icon(Icons.location_on_outlined)),),
          Container(transform: Matrix4.translationValues(-10, 0, 0.0),child:Text("${title}",style: TextStyle(color: Colors.white),),),
          Container(transform: Matrix4.translationValues(-20, 0, 0.0),
            child: IconButton(
              color: Colors.white,
              splashColor: Colors.transparent,
              highlightColor: Colors.transparent,
              onPressed: (){},
              iconSize: 35,
              icon: Icon(Icons.arrow_drop_down),
            ),
          )
        ],
      ),
    );

  }
}









class HLineTextHLine extends StatelessWidget {
  const HLineTextHLine({super.key, required this.text});
  final String text;
  @override
  Widget build(BuildContext context) {
    return Container(
      // margin: EdgeInsets(),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Container(
            height: 1,
            width: 30,
            decoration: BoxDecoration(
                border: Border.all(width: 1,color: Colors.grey)
            ),
          ),
          Padding(padding: EdgeInsets.only(left: 10)),
          Text(text),
          Padding(padding: EdgeInsets.only(left: 10)),
          Container(
            height: 1,
            width: 30,
            decoration: BoxDecoration(
                border: Border.all(width: 1,color: Colors.grey)
            ),
          ),
        ],
      ),
    );
  }
}













class VipBanner extends StatelessWidget {
  const VipBanner({super.key});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20,vertical: 10),
      height: 40,
      decoration: BoxDecoration(
        color: Color(int.parse("feedc1",radix:16)).withAlpha(255),
        borderRadius: BorderRadius.circular(4),
      ),
      child:  Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            decoration: BoxDecoration(
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Image.asset("assets/images/super_member.png"),
                Padding(padding: EdgeInsets.only(right:10)),
                Text("超级会员", style: TextStyle(fontWeight: FontWeight.bold,color: Colors.grey.shade700),),
                Padding(padding: EdgeInsets.only(right:10)),
                Text("每月享超值权益", style: TextStyle(fontWeight: FontWeight.normal,color: Colors.grey.shade700,fontSize: 12)),
              ],
            ),

          ),
          Container(
            decoration: BoxDecoration(
            ),
            child: Row(
              children: [
                Text("立即开通", style: TextStyle(fontWeight: FontWeight.normal,color: Colors.grey.shade700),),
                Container(margin:EdgeInsets.only(top: 1.9),child: Icon(Icons.arrow_forward_ios,size: 12,color: Colors.grey.shade700),)
              ],
            ),
          )
        ],
      ),
    );
  }
}




class IndexTopBanner extends StatelessWidget {
  const IndexTopBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 200,
        decoration: BoxDecoration(
            image:DecorationImage(image: AssetImage("assets/imgs/carbon_index_1.png"),fit:BoxFit.fill)
        ),

    );
  }
}













class IndexBanner extends StatelessWidget {
  const IndexBanner({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
        height: 100,
        decoration: BoxDecoration(
          //为图片设置圆角
          //圆角半径
            borderRadius: const BorderRadius.all(Radius.circular(4.0)),
            //边框线宽、颜色
            border: Border.all(width: 1.0, color: Colors.grey.shade300),
            image: DecorationImage(
                image: AssetImage("assets/images/index_banner.png"),
                fit: BoxFit.fill
            )
        ),
        child: Container(
          alignment: Alignment.topLeft,
          padding: EdgeInsets.only(left:15, top:8),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text("品质套餐",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18, color: Colors.grey.shade800),),
              Padding(padding: EdgeInsets.only(bottom: 4)),
              Text("搭配齐全吃得好",style: TextStyle(fontWeight: FontWeight.normal,fontSize: 12, color: Colors.grey.shade800),),
              Padding(padding: EdgeInsets.only(bottom: 10)),
              Container(
                child: Row(
                  children: [
                    Text("立即抢购",
                      style: TextStyle(fontWeight: FontWeight.bold,fontSize: 14, color: Colors.amber.shade700),
                    ),
                    Container(margin:EdgeInsets.only(top: 1.9),child: Icon(Icons.arrow_forward_ios,size: 12,color: Colors.amber.shade700),)
                  ],
                ),
              ),
            ],
          ),
        )
    );
  }
}






















class IndexGridViewItem extends StatelessWidget {
  const IndexGridViewItem({super.key, required this.item});
  final ViewItemModel<String> item;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      margin: EdgeInsets.only(bottom: 10),
      child: Column(
        children: <Widget>[
          Expanded(
              child: Container(
                width: 40,
                decoration: BoxDecoration(
                  // borderRadius: const BorderRadius.all(Radius.circular(4)),
                  // border: Border.all(width: 1, color: Colors.black),
                  // color: Colors.green,
                  image: DecorationImage(
                    image: AssetImage(item.data),
                    fit: BoxFit.cover
                  )
                ),
              )
          ),
          Padding(padding: EdgeInsets.only(bottom: 5)),
          Text(
            this.item.title,
            style: TextStyle(
              fontSize: 11,
              color: Color(0xFF333333),
            ),
          ),
        ],
      ),
    );
  }
}





















class IndexListViewItem extends StatelessWidget {
  const IndexListViewItem({super.key, required this.item, required this.index});

  final ArticleItem item;
  final int index;

  @override
  Widget build(BuildContext context) {
    return Container(
        padding: EdgeInsets.symmetric(vertical: 12,horizontal: 5),
        decoration: BoxDecoration(
          // color: Colors.grey
          border: Border(bottom: BorderSide(width: 1.0, color: Colors.grey.shade300)),
        ),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              width: 120,height: 110,
              decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(8)),
                color: Colors.green,
                image: DecorationImage(image: AssetImage("assets/imgs/index${(index+1)}.png"),fit:BoxFit.cover)
              ),
              // child: Text("碳资产"),
            ),
            // Image.asset(item.imgPath,scale: 1.8,),
            Padding(padding: EdgeInsets.only(right:10)),
            Expanded(
                child: Container(
                  height: 110, //定义height后，spaceBetween才能生效。
                  transform: Matrix4.translationValues(0, -3, 0.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(item.title,style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),),
                      Padding(padding: EdgeInsets.only(bottom: 5)),
                      Container(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text("${item.author}",style: TextStyle(fontSize: 12),),
                            Text("${item.createdTime.substring(0,10)}",style: TextStyle(fontSize: 12),),
                          ],
                        ),
                      ),
                      // Padding(padding: EdgeInsets.only(bottom:10)),
                      // Row(
                      //   mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      //   // crossAxisAlignment: CrossAxisAlignment.center,
                      //   children: [
                      //     HighlightText(color: Colors.green, text: "新",desc: "饿了么新用户首单立减9元",),
                      //     Text("2个活动",style: TextStyle(fontSize: 12,color: Colors.grey),)
                      //   ],
                      // ),
                      // Padding(padding: EdgeInsets.only(bottom:5)),
                      // HighlightText(color: Colors.orange, text: "特",desc: "特价商品5元起",),
                      //

                    ],
                  ),
                ))
          ],
        )
    );
  }
}











class HighlightText extends StatelessWidget{
  const HighlightText({super.key, required this.color, required this.text, required this.desc});
  final Color color;
  final String text;
  final String desc;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            // padding: EdgeInsets.only(right: 3,left:3,bottom: 4 ),
            padding: EdgeInsets.only(right: 1,left:1,top: 0),
            decoration: BoxDecoration(
                borderRadius: const BorderRadius.all(Radius.circular(4.0)),
                color: color
            ),
            child: Text(text,style: TextStyle(color: Colors.white,fontSize: 12),),
          ),
          Padding(padding: EdgeInsets.only(right:5)),
          Container(
            // padding: EdgeInsets.only(bottom: 4),
            child: Text(desc,style: TextStyle(fontSize: 12),),
          )
        ],
      ),
    );
  }
}
